import React, { useEffect, useState } from 'react'
import './index.less'
import { Play } from '@react-vant/icons';
import { Tabs } from 'react-vant'
import { history } from 'umi'
import axios from 'axios'

export default function index() {

  const [list, setlist] = useState([])

  useEffect(() => {
    getlist()

  }, [])

  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/zgh_yhj_look')
    console.log(new Date(data.data[0].date) < new Date());
    setlist(data.data)
  }

  return (
    <div className='yhj'>

      {/* 头部 */}
      <div className='top'>

        <div>
          <Play rotate={180} className='top_an' onClick={() => { history.push('/app/my') }} />
          优惠劵
        </div>
      </div>

      {/* 标签栏 */}
      <div className="con">
        <div className='demo-tabs'>
          <Tabs defaultActive={0} lineWidth='33%' color='#56A138' >

            <Tabs.TabPane title='未使用'>

              {
                list.filter(ele => ele.cate && new Date(ele.date) > new Date()).map(ele => {
                  return <div className='Discount_con' key={ele._id}>
                    <div className='Discount_top'>
                      <p><span className='price'>￥</span>{ele.price}</p>
                      <div className='Discount_one'>全场通用</div>
                      <div className='Discount_two'>满{ele.man}可用</div>
                      <div className='Discount_three' onClick={()=>{history.push('/')}}>
                        立即使用
                      </div>
                    </div>
                    <div className='Discount_bottom'>
                      有效期至:{ele.date.replace('T', ' ').split('.')[0]}
                    </div>
                  </div>

                })
              }

            </Tabs.TabPane>

            <Tabs.TabPane title='已使用'>
              {
                list.filter(ele => !ele.cate).map(ele => {
                  return <div className='Discount_con Discount_ysy' key={ele._id}>
                    <div className='Discount_top'>
                      <p><span className='price'>￥</span>{ele.price}</p>
                      <div className='Discount_one'>全场通用</div>
                      <div className='Discount_two'>满{ele.man}可用</div>
                      <div className='Discount_three Discount_ysy_lksy'>
                        立即使用
                      </div>
                      <div className='Discount_box'></div>
                      <div className='Discount_box_txt'>已使用</div>
                    </div>
                    <div className='Discount_bottom'>
                      有效期至:{ele.date.replace('T', ' ').split('.')[0]}
                    </div>
                  </div>

                })
              }

            </Tabs.TabPane>

            <Tabs.TabPane title='已过期'>
              {
                list.filter(ele => new Date(ele.date)<new Date()).map(ele => {
                  return <div className='Discount_con Discount_ysy Discount_ygq' key={ele._id}>
                    <div className='Discount_top'>
                      <p><span className='price'>￥</span>{ele.price}</p>
                      <div className='Discount_one'>全场通用</div>
                      <div className='Discount_two'>满{ele.man}可用</div>
                      <div className='Discount_three Discount_ysy_lksy'>
                        立即使用
                      </div>
                      <div className='Discount_box Discount_box_old'></div>
                      <div className='Discount_box_txt'>已过期</div>
                    </div>
                    <div className='Discount_bottom'>
                      有效期至:{ele.date.replace('T', ' ').split('.')[0]}
                    </div>
                  </div>

                })
              }

            </Tabs.TabPane>


          </Tabs>
        </div>

      </div>
    </div>
  )
}
